<template>
  <div class="statis" id="statis-list">
    <div class="content-main" v-if="show">
      <div class="type-scroll" id="topS">
        <div
          :class="{ item: true, item_: checkType == index }"
          :key="index"
          v-for="(item, index) in typeList"
          @click="toType(index)"
        >
          {{ item }}
          <!-- <text>{{item}}</text> -->
          <div :class="{ line: true, line_: checkType == index }"></div>
        </div>
      </div>
      <div class="time" v-if="checkType == 0">
        <div @click="toTime(0)" :class="{ item: true, item_: checkTime == 0 }">
          日
        </div>
        <div class="line"></div>
        <div @click="toTime(1)" :class="{ item: true, item_: checkTime == 1 }">
          周
        </div>
        <div class="line"></div>
        <div @click="toTime(2)" :class="{ item: true, item_: checkTime == 2 }">
          月
        </div>
        <div class="line"></div>
        <div @click="toTime(3)" :class="{ item: true, item_: checkTime == 3 }">
          总
        </div>
      </div>
      <div
        :class="{
          'store-type1': true,
        }"
        v-if="checkType == 4 || checkType == 2 || checkType == 5"
      >
        <span v-if="checkType == 4">艺店月排行</span>
        <span v-if="checkType == 1">商品排行榜</span>
        <span v-if="checkType == 2">退款排行榜</span>
        <span v-if="checkType == 5">类目</span>
        <div @click="changeMonth">
          {{ monChange == 1 ? "上月历史" : "本月历史" }}
        </div>
      </div>
      <div class="store-type2" v-if="checkType == 4">
        <div
          @click="toStoreType(1)"
          :class="{ item: true, item_: storeType == 1 }"
        >
          自购
        </div>
        <div class="line"></div>
        <div
          @click="toStoreType(2)"
          :class="{ item: true, item_: storeType == 2 }"
        >
          分销
        </div>
        <div class="line"></div>
        <div
          @click="toStoreType(3)"
          :class="{ item: true, item_: storeType == 3 }"
        >
          拉新
        </div>
      </div>
      <div class="store-type3" v-if="checkType == 3">
        <div @click="toCanal(1)" :class="{ item: true, item_: canalType == 1 }">
          本周
        </div>
        <div class="line"></div>
        <div @click="toCanal(2)" :class="{ item: true, item_: canalType == 2 }">
          上周
        </div>
        <div class="line"></div>
        <div @click="toCanal(3)" :class="{ item: true, item_: canalType == 3 }">
          本月
        </div>
        <div class="line"></div>
        <div @click="toCanal(4)" :class="{ item: true, item_: canalType == 4 }">
          上月
        </div>
        <div class="line"></div>
        <div @click="toCanal(5)" :class="{ item: true, item_: canalType == 5 }">
          总计
        </div>
      </div>
      <div class="store-type3 store-type3_" v-if="checkType == 1">
        <div
          @click="toCanalGoods(1)"
          :class="{ item: true, item_: goodsTime == 1 }"
        >
          今日
        </div>
        <div class="line"></div>
        <div
          @click="toCanalGoods(2)"
          :class="{ item: true, item_: goodsTime == 2 }"
        >
          昨日
        </div>
        <div class="line"></div>
        <div
          @click="toCanalGoods(3)"
          :class="{ item: true, item_: goodsTime == 3 }"
        >
          本周
        </div>
        <div class="line"></div>
        <div
          @click="toCanalGoods(4)"
          :class="{ item: true, item_: goodsTime == 4 }"
        >
          上周
        </div>
        <div class="line"></div>
        <div
          @click="toCanalGoods(5)"
          :class="{ item: true, item_: goodsTime == 5 }"
        >
          本月
        </div>
        <div class="line"></div>
        <div
          @click="toCanalGoods(6)"
          :class="{ item: true, item_: goodsTime == 6 }"
        >
          上月
        </div>
      </div>
      <div class="store-size" v-if="checkType == 3">
        <div class="item" @click="changeUser(1)">
          <span>用户</span>
          <div :class="{ bac: true, 'bac-red': type == 1 }"></div>
        </div>
        <div class="item" @click="changeUser(2)">
          <span>外部</span>
          <div :class="{ bac: true, 'bac-red': type == 2 }"></div>
        </div>
        <div class="item" @click="changeUser(3)">
          <span>内部</span>
          <div :class="{ bac: true, 'bac-red': type == 3 }"></div>
        </div>
      </div>
      <div class="store-num" v-if="checkType == 3">
        <div class="item">
          <span>渠道号</span>
          <span>({{ detail.channel_sum }})</span>
        </div>
        <div class="line_"></div>
        <div class="item">
          <span>一级</span>
          <span>({{ detail.one_sum }})</span>
        </div>
        <div class="line_"></div>
        <div class="item">
          <span>二级</span>
          <span>({{ detail.two_sum }})</span>
        </div>
        <div class="line_"></div>
        <div class="item">
          <span>三级</span>
          <span>({{ detail.three_sum }})</span>
        </div>
      </div>
      <div
        :class="{ 'store-type2': true, 'store-type2_': checkType == 1 }"
        v-if="checkType == 1 || checkType == 2"
      >
        <div
          @click="toGoodsType(1)"
          :class="{ item: true, item_: goodsType == 1 }"
        >
          新人
        </div>
        <div class="line"></div>
        <div
          @click="toGoodsType(2)"
          :class="{ item: true, item_: goodsType == 2 }"
        >
          老用户
        </div>
        <div class="line"></div>
        <div
          @click="toGoodsType(3)"
          :class="{ item: true, item_: goodsType == 3 }"
        >
          平台
        </div>
      </div>
      <div class="one-content same" v-if="checkType == 0">
        <div class="line">
          <div @click="toChart(1)" class="item bac1" v-if="info.add_store_sum">
            <div>{{ checkTime == 3 ? "艺店总数" : "新增会员总数" }}</div>
            <div v-if="checkTime == 0">{{ info.add_store_sum.this }}</div>
            <div v-if="checkTime == 1">{{ info.add_store_sum.this }}</div>
            <div v-if="checkTime == 2">{{ info.add_store_sum.this }}</div>
            <div v-if="checkTime == 3">{{ info.add_store_sum.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1 span1_">昨日:</span>
              <span class="span2">{{ info.add_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1 span1_">上周:</span>
              <span class="span2">{{ info.add_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1 span1_">上月:</span>
              <span class="span2">{{ info.add_store_sum.last }}</span>
            </div>
          </div>
          <div
            @click="toChart(1)"
            class="item bac1"
            v-if="info.add_try_store_sum"
          >
            <div>
              {{ checkTime == 3 ? "体验版艺店总数" : "预留位置" }}
            </div>
            <div v-if="checkTime == 0">{{ info.add_try_store_sum.this }}</div>
            <div v-if="checkTime == 1">{{ info.add_try_store_sum.this }}</div>
            <div v-if="checkTime == 2">{{ info.add_try_store_sum.this }}</div>
            <div v-if="checkTime == 3">{{ info.add_try_store_sum.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1 span1_">昨日:</span>
              <span class="span2">{{ info.add_try_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1 span1_">上周:</span>
              <span class="span2">{{ info.add_try_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1 span1_">上月:</span>
              <span class="span2">{{ info.add_try_store_sum.last }}</span>
            </div>
          </div>
          <div @click="toChart(1)" class="item bac1" v-if="info.add_user_sum">
            <div>{{ checkTime == 3 ? "用户" : "新增用户" }}</div>
            <div v-if="checkTime == 0">{{ info.add_user_sum.this }}</div>
            <div v-if="checkTime == 1">{{ info.add_user_sum.this }}</div>
            <div v-if="checkTime == 2">{{ info.add_user_sum.this }}</div>
            <div v-if="checkTime == 3">{{ info.add_user_sum.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1 span1_">昨日:</span>
              <span class="span2">{{ info.add_user_sum.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1 span1_">上周:</span>
              <span class="span2">{{ info.add_user_sum.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1 span1_">上月:</span>
              <span class="span2">{{ info.add_user_sum.last }}</span>
            </div>
          </div>
          <!-- <div
            @click="toChart(1)"
            class="item bac1"
            v-if="info.user_add_store_sum"
          >
            <div>用户裂变艺店</div>
            <div v-if="checkTime == 0">{{ info.user_add_store_sum.this }}</div>
            <div v-if="checkTime == 1">{{ info.user_add_store_sum.this }}</div>
            <div v-if="checkTime == 2">{{ info.user_add_store_sum.this }}</div>
            <div v-if="checkTime == 3">{{ info.user_add_store_sum.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.user_add_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.user_add_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.user_add_store_sum.last }}</span>
            </div>
          </div>
          <div
            @click="toChart(1)"
            class="item bac1"
            v-if="info.dbo_add_store_sum"
          >
            <div>内部推广艺店</div>
            <div v-if="checkTime == 0">{{ info.dbo_add_store_sum.this }}</div>
            <div v-if="checkTime == 1">{{ info.dbo_add_store_sum.this }}</div>
            <div v-if="checkTime == 2">{{ info.dbo_add_store_sum.this }}</div>
            <div v-if="checkTime == 3">{{ info.dbo_add_store_sum.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.dbo_add_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.dbo_add_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.dbo_add_store_sum.last }}</span>
            </div>
          </div>
          <div
            @click="toChart(1)"
            class="item bac1"
            v-if="info.outer_add_store_sum"
          >
            <div>外部推广艺店</div>
            <div v-if="checkTime == 0">
              {{ info.outer_add_store_sum.this }}
            </div>
            <div v-if="checkTime == 1">{{ info.outer_add_store_sum.this }}</div>
            <div v-if="checkTime == 2">
              {{ info.outer_add_store_sum.this }}
            </div>
            <div v-if="checkTime == 3">
              {{ info.outer_add_store_sum.this }}
            </div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.outer_add_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.outer_add_store_sum.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.outer_add_store_sum.last }}</span>
            </div>
          </div> -->
          <div @click="toChart(2)" class="item bac2" v-if="info.pay_user_sum">
            <div>支付用户</div>
            <div v-if="checkTime == 0">{{ info.pay_user_sum.this }}</div>
            <div v-if="checkTime == 1">{{ info.pay_user_sum.this }}</div>
            <div v-if="checkTime == 2">{{ info.pay_user_sum.this }}</div>
            <div v-if="checkTime == 3">{{ info.pay_user_sum.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.pay_user_sum.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.pay_user_sum.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.pay_user_sum.last }}</span>
            </div>
          </div>
          <div @click="toChart(2)" class="item bac2" v-if="info.pay_order_sum">
            <div>支付订单</div>
            <div v-if="checkTime == 0">{{ info.pay_order_sum.this }}</div>
            <div v-if="checkTime == 1">{{ info.pay_order_sum.this }}</div>
            <div v-if="checkTime == 2">{{ info.pay_order_sum.this }}</div>
            <div v-if="checkTime == 3">{{ info.pay_order_sum.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.pay_order_sum.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.pay_order_sum.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.pay_order_sum.last }}</span>
            </div>
          </div>
          <div @click="toChart(6)" class="item bac2" v-if="info.pay_amount">
            <div>总流水(减退款)</div>
            <div v-if="checkTime == 0">{{ info.pay_amount.this }}</div>
            <div v-if="checkTime == 1">{{ info.pay_amount.this }}</div>
            <div v-if="checkTime == 2">{{ info.pay_amount.this }}</div>
            <div v-if="checkTime == 3">{{ info.pay_amount.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.pay_amount.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.pay_amount.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.pay_amount.last }}</span>
            </div>
          </div>

          <div @click="toChart(4)" class="item bac2" v-if="info.margin">
            <div>毛利(减退款)</div>
            <div v-if="checkTime == 0">{{ info.margin.this }}</div>
            <div v-if="checkTime == 1">{{ info.margin.this }}</div>
            <div v-if="checkTime == 2">{{ info.margin.this }}</div>
            <div v-if="checkTime == 3">{{ info.margin.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.margin.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.margin.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.margin.last }}</span>
            </div>
          </div>
          <div @click="toChart(3)" class="item bac2" v-if="info.user_per_price">
            <div>客单价</div>
            <div v-if="checkTime == 0">{{ info.user_per_price.this }}</div>
            <div v-if="checkTime == 1">{{ info.user_per_price.this }}</div>
            <div v-if="checkTime == 2">{{ info.user_per_price.this }}</div>
            <div v-if="checkTime == 3">{{ info.user_per_price.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.user_per_price.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.user_per_price.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.user_per_price.last }}</span>
            </div>
          </div>
          <div
            @click="toChart(8)"
            class="item bac2"
            v-if="info.first_order_num"
          >
            <div>首单支付用户</div>
            <div v-if="checkTime == 0">{{ info.first_order_num.this }}</div>
            <div v-if="checkTime == 1">{{ info.first_order_num.this }}</div>
            <div v-if="checkTime == 2">{{ info.first_order_num.this }}</div>
            <div v-if="checkTime == 3">{{ info.first_order_num.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.first_order_num.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.first_order_num.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.first_order_num.last }}</span>
            </div>
          </div>
          <div
            @click="toChart(9)"
            class="item bac2"
            v-if="info.first_order_amount"
          >
            <div>首单客单价</div>
            <div v-if="checkTime == 0">{{ info.first_order_amount.this }}</div>
            <div v-if="checkTime == 1">{{ info.first_order_amount.this }}</div>
            <div v-if="checkTime == 2">{{ info.first_order_amount.this }}</div>
            <div v-if="checkTime == 3">{{ info.first_order_amount.this }}</div>
            <div v-if="checkTime == 0">
              <span class="span1">昨日:</span>
              <span class="span2">{{ info.first_order_amount.last }}</span>
            </div>
            <div v-if="checkTime == 1">
              <span class="span1">上周:</span>
              <span class="span2">{{ info.first_order_amount.last }}</span>
            </div>
            <div v-if="checkTime == 2">
              <span class="span1">上月:</span>
              <span class="span2">{{ info.first_order_amount.last }}</span>
            </div>
          </div>
          <div
            @click="toOrder"
            class="item bac2"
            v-if="info.wait_ship_order_sum"
          >
            <div>待发货订单</div>
            <div>{{ info.wait_ship_order_sum}}</div>

          </div>
          
        </div>
      </div>
      <div class="two-content same content2-margin" v-if="checkType == 3">
        <div class="item" :key="index" v-for="(item, index) in nuclearList">
          <div class="top">
            <div class="line1">
              <img class="img" :src="item.store_logo" />
              <div class="right">
                <div class="name overflow_">{{ item.store_name }}</div>
                <div class="btn" v-if="index < 10">TOP-{{ index + 1 }}</div>
              </div>
            </div>
            <div class="line2-main">
              <div class="line2">
                <span>本月:</span>
                <span :class="{ span_red: index < 10 }">{{
                  item.this_month_invite
                }}</span>
                <span>艺店</span>
              </div>
              <div class="line2" style="margin-left: 12px">
                <span>总数:</span>
                <span :class="{ span_red: index < 10 }">{{
                  item.all_invite
                }}</span>
                <span>艺店</span>
              </div>
            </div>
          </div>
          <div
            :class="{ bottom: true, 'bottom-no': !item.show }"
            v-if="item.this_month_invite > 0"
            @click="toShow1(index, item.user_id)"
          >
            <span>{{ item.show ? "收起详情" : "展开详情" }}</span>
            <img v-if="item.show" class="sj-img" src="/static/img/sq.png" />
            <img v-else class="sj-img" src="/static/img/zk.png" />
          </div>
          <div class="next-main" v-if="item.show">
            <div
              class="item_1"
              :key="index_1"
              v-for="(item_1, index_1) in oneList"
            >
              <div class="top_2">
                <img class="img-head" :src="item_1.store_logo" />
                <div class="item_1_right">
                  <div class="item_1_right_content1">
                    <div class="name overflow_">{{ item_1.title }}</div>
                    <div
                      class="zk-detail"
                      v-if="item_1.this_month_invite > 0"
                      @click="toShow2(index_1, item_1.user_id)"
                    >
                      <span>{{ item_1.show ? "收起详情" : "展开详情" }}</span>
                      <img
                        v-if="item_1.show"
                        class="sj-img"
                        src="/static/img/sq.png"
                      />
                      <img v-else class="sj-img" src="/static/img/zk.png" />
                    </div>
                  </div>
                  <div class="item_1_right_content2">
                    <div>
                      <span class="span1">本月</span>
                      <span class="span2">{{ item_1.this_month_invite }}</span>
                      <span class="span3">艺店</span>
                    </div>
                    <div>
                      <span class="span1">总数</span>
                      <span class="span2">{{ item_1.all_invite }}</span>
                      <span class="span3">艺店</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="next-bottom" v-if="item_1.show">
                <div
                  class="item_2"
                  :key="index_2"
                  v-for="(item_2, index_2) in twoList"
                >
                  <div class="content1">
                    <img class="img" :src="item_2.store_logo" />
                    <div class="name overflow_">{{ item_2.title }}</div>
                  </div>
                  <div class="content2">
                    <div>
                      <span class="span1">本月</span>
                      <span class="span2">{{ item_2.this_month_invite }}</span>
                      <span class="span3">艺店</span>
                    </div>
                    <div>
                      <span class="span1">总数</span>
                      <span class="span2">{{ item_2.all_invite }}</span>
                      <span class="span3">艺店</span>
                    </div>
                  </div>
                </div>
                <!-- <div class="bac-sjx2"></div> -->
              </div>
            </div>
            <!-- <div class="bac-sjx1"></div> -->
          </div>
        </div>
        <div
          class="statis_no statis_no_list"
          v-if="nuclearList.length == 0 && showDom"
        >
          <img src="/static/picture/detail_null.png" class="no_pic" />
          <div class="no_title">暂无数据</div>
        </div>
      </div>
      <div class="three-content same content3-margin" v-if="checkType == 4">
        <div
          :class="{ item: true, backgroud: index % 2 == 0 }"
          :key="index"
          v-for="(item, index) in storeList"
        >
          <div class="line1">
            <div class="img">
              <img :src="item.store_logo" />
            </div>
            <div class="name overflow_">{{ item.store_name }}</div>
            <div class="btn" v-if="index < 10">TOP-{{ index + 1 }}</div>
          </div>
          <div class="line2">
            <div class="item_2">
              <div :class="{ blackCorlor: storeType == 1 }">自购金额</div>
              <div :class="{ margin_1: true, redCorlor: storeType == 1 }">
                {{ item.self_store_amount }}
              </div>
            </div>
            <div class="item_2">
              <div>省钱金额</div>
              <div class="margin_1">{{ item.spare_amount }}</div>
            </div>
            <div class="item_2">
              <div style="color: #333334">艺店订单</div>
              <div class="margin_2">{{ item.order_store_sum }}</div>
            </div>
          </div>
          <div class="line2">
            <div class="item_2">
              <div :class="{ blackCorlor: storeType == 2 }">分销金额</div>
              <div :class="{ margin_2: true, redCorlor: storeType == 2 }">
                {{ item.other_store_amount }}
              </div>
            </div>
            <div class="item_2">
              <div>店铺收益</div>
              <div class="margin_2">{{ item.gain_store_amount }}</div>
            </div>
            <div class="item_2">
              <div style="color: #333334">累计粉丝</div>
              <div class="margin_2">{{ item.add_fans }}</div>
            </div>
          </div>
          <div class="line2">
            <div class="item_2">
              <div :class="{ blackCorlor: storeType == 3 }">邀请店主</div>
              <div :class="{ margin_2: true, redCorlor: storeType == 3 }">
                {{ item.invite_store_sum }}
              </div>
            </div>
            <div class="item_2">
              <div :class="{ blackCorlor: storeType == 3 }">邀请佣金</div>
              <div :class="{ margin_2: true, redCorlor: storeType == 3 }">
                {{ item.invite_reward }}
              </div>
            </div>
            <div class="item_2">
              <div style="color: #333334">总计流水</div>
              <div class="margin_2">{{ item.store_amount }}</div>
            </div>
          </div>
          <div class="line_"></div>
        </div>
        <div
          class="statis_no statis_no_list"
          v-if="storeList.length == 0 && showDom"
        >
          <img src="/static/picture/detail_null.png" class="no_pic" />
          <div class="no_title">暂无数据</div>
        </div>
      </div>
      <div class="four-content same content4-margin" v-if="checkType == 1">
        <div class="item" :key="index" v-for="(item, index) in goodsList">
          <div class="left">
            <img :src="item.goods_image" />
          </div>
          <div class="right">
            <div class="div1" v-if="index < 10">TOP-{{ index + 1 }}</div>
            <div class="div2 overflow_2">{{ item.goods_name }}</div>
            <div class="div3" style="margin-top: 20px;" v-if="goodsType == 1">
              <span>销量金额:¥{{ item.new_sale_price }}</span>
              <span>销量:{{ item.new_sale_num }}</span>
            </div>
            <div class="div3" :style="{'marginTop': goodsType == 2 ? '20px': '' }" v-if="goodsType != 1">
              <span>销量金额:¥{{ item.sale_price }}</span>
              <span>销量:{{ item.month_sales }}</span>
            </div>
            <div class="div3"   v-if="goodsType != 1 && goodsType != 2">
              <span>点击量:{{ item.click_num }}</span>
              <span>转化率:{{ item.sale_rate }}%</span>
            </div>
          </div>
          <!-- <div class="div1" v-if="index<10 && goodsType != 1">top-{{index+1}}</div>
          <div class="div2 overflow_">{{item.goods_name}}</div>
          <div class="div3">
            <span>销量:{{item.month_sales}}</span>
            <span>销量金额:¥{{item.sale_price}}</span>
          </div> -->
        </div>
        <div
          class="statis_no statis_no_list"
          v-if="goodsList.length == 0 && showDom"
        >
          <img src="/static/picture/detail_null.png" class="no_pic" />
          <div class="no_title">暂无数据</div>
        </div>
      </div>
      <div class="four-content same content4-margin" v-if="checkType == 2">
        <div class="item" :key="index" v-for="(item, index) in refundList">
          <div class="left">
            <img :src="item.goods_image" />
          </div>
          <div class="right">
            <div class="div1" v-if="index < 10">TOP-{{ index + 1 }}</div>
            <div class="div2 overflow_2">{{ item.goods_name }}</div>
            <div class="div3">
              <span>退款金额:¥{{ item.sale_price }}</span>
              <span>数量:{{ item.month_sales }}</span>
            </div>
          </div>
        </div>
        <div
          class="statis_no statis_no_list"
          v-if="refundList.length == 0 && showDom"
        >
          <img src="/static/picture/detail_null.png" class="no_pic" />
          <div class="no_title">暂无数据</div>
        </div>
      </div>
      <div class="five-content same content5-margin" v-if="checkType == 5">
        <div class="title">
          <div class="title-text">类型</div>
          <div class="line"></div>
          <div class="title-text">礼包</div>
          <div class="line"></div>
          <div class="title-text">艺店</div>
          <div class="line"></div>
          <div class="title-text">平台</div>
        </div>
        <div class="item" :key="index" v-for="(item, index) in categoryList">
          <div class="content_">
            <img :src="item.ui" />
            <span>{{ item.name }}</span>
          </div>
          <div class="content">
            <span>{{ item.gift_num }}个</span>
            <span>{{ item.gift_peicent }}</span>
          </div>
          <div class="line"></div>
          <div class="content">
            <span>{{ item.store_num }}个</span>
            <span>{{ item.store_peicent }}</span>
          </div>
          <div class="line"></div>
          <div class="content">
            <span>{{ item.yff_num }}个</span>
            <span>{{ item.yff_peicent }}</span>
          </div>
        </div>
      </div>
      <div class="canal-centent same content6-margin" v-if="checkType == 3">
        <div class="item" :key="index" v-for="(item, index) in usernuclearList">
          <div class="top">
            <div class="line1">
              <img class="img" :src="item.head" />
              <div class="right">
                <div class="name overflow_">{{ item.one }}</div>
                <div class="btn" v-if="index < 10">TOP-{{ index + 1 }}</div>
              </div>
            </div>
            <div class="line2-main">
              <!-- <div class="line2">
                <span>本月:</span>
                <span :class="{'span_red':index<10}">{{item.this_month_invite}}</span>
                <span>艺店</span>
              </div>-->
              <div class="line2" style="margin-left: 12px">
                <span v-if="canalType == 1">本周总数:</span>
                <span v-if="canalType == 2">上周总数:</span>
                <span v-if="canalType == 3">本月总数:</span>
                <span v-if="canalType == 4">上月总数:</span>
                <span v-if="canalType == 5">总计:</span>
                <span :class="{ span_red: index < 10 }">{{ item.two }}</span>
                <span>艺店</span>
              </div>
            </div>
          </div>
          <div
            :class="{ bottom: true, 'bottom-no': !item.show }"
            v-if="item.two > 0"
            @click="toShow1(index, item.user_id)"
          >
            <span>{{ item.show ? "收起详情" : "展开详情" }}</span>
            <img v-if="item.show" class="sj-img" src="/static/img/sq.png" />
            <img v-else class="sj-img" src="/static/img/zk.png" />
          </div>
          <div class="next-main" v-if="item.show">
            <div
              class="item_1"
              :key="index_1"
              v-for="(item_1, index_1) in oneList"
            >
              <div class="top_2">
                <img class="img-head" :src="item_1.store_logo" />
                <div class="item_1_right">
                  <div class="item_1_right_content1">
                    <div class="name overflow_">{{ item_1.title }}</div>
                    <div
                      class="zk-detail"
                      v-if="item_1.this_month_invite > 0"
                      @click="toShow2(index_1, item_1.user_id)"
                    >
                      <span>{{ item_1.show ? "收起详情" : "展开详情" }}</span>
                      <img
                        v-if="item_1.show"
                        class="sj-img"
                        src="/static/img/sq.png"
                      />
                      <img v-else class="sj-img" src="/static/img/zk.png" />
                    </div>
                  </div>
                  <div class="item_1_right_content2">
                    <div>
                      <span class="span1" v-if="canalType == 1">本周总数:</span>
                      <span class="span1" v-if="canalType == 2">上周总数:</span>
                      <span class="span1" v-if="canalType == 3">本月总数:</span>
                      <span class="span1" v-if="canalType == 4">上月总数:</span>
                      <span class="span1" v-if="canalType == 5">总计:</span>
                      <span class="span2">{{ item_1.this_month_invite }}</span>
                      <span class="span3">艺店</span>
                    </div>
                    <!-- <div>
                      <span class="span1">总数</span>
                      <span class="span2">{{ item_1.all_invite }}</span>
                      <span class="span3">艺店</span>
                    </div> -->
                  </div>
                </div>
              </div>
              <div class="next-bottom" v-if="item_1.show">
                <div
                  class="item_2"
                  :key="index_2"
                  v-for="(item_2, index_2) in twoList"
                >
                  <div class="content1">
                    <img class="img" :src="item_2.store_logo" />
                    <div class="name overflow_">{{ item_2.title }}</div>
                  </div>
                  <div class="content2">
                    <div>
                      <span class="span1" v-if="canalType == 1">本周总数:</span>
                      <span class="span1" v-if="canalType == 2">上周总数:</span>
                      <span class="span1" v-if="canalType == 3">本月总数:</span>
                      <span class="span1" v-if="canalType == 4">上月总数:</span>
                      <span class="span1" v-if="canalType == 5">总计:</span>
                      <span class="span2">{{ item_2.this_month_invite }}</span>
                      <span class="span3">艺店</span>
                    </div>
                    <!-- <div>
                      <span class="span1">总数</span>
                      <span class="span2">{{ item_2.all_invite }}</span>
                      <span class="span3">艺店</span>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="statis_no" v-if="showDom && !show">
      <img src="/static/picture/detail_null.png" class="no_pic" />
      <div class="no_title">暂无权限</div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "Statistics",
  data() {
    return {
      show_1: false,
      showDom: false,
      canalType: 1, //渠道列表时间切换
      monChange: 1, //1本月，2上月
      goodsTime: 1, //商品排行榜时间筛选
      checkType: 0,
      checkTime: 0, //周报时间类型
      storeType: 1, //艺店月排行类型
      goodsType: 1, //商品排行类型
      typeList: [
        "概要",
        "商品排行榜",
        "退款排行榜",
        "订单列表",
       
        "艺店月排行",
        
        "类目",
      ],
      nuclearList: [],
      usernuclearList: "", //渠道裂变列表(用户)
      outnuclearList: "", //渠道裂变列表(外部)
      intnuclearList: "", //渠道裂变列表(内部)
      show1: false,
      show2: false,
      show3: false,
      type: 1,
      // type2: -1,
      // type3: -1,
      storeList: [], //店铺列表
      goodsList: [], //商品排行列表
      refundList: [], //退款商品列表
      categoryList: [], //类目列表
      oneList: [], //裂变列表2级数据
      twoList: [], //裂变列表3级数据
      token: "",
      info: "",
      show: false,
      typeTime: 1,
      page: 1,
      limit: 15,
      isSending: false, // 是否正在加载
      isGetMore: true, // 是否还有更多
      detail: "",
    };
  },
  mounted() {
    var that = this;
    window.onscroll = function () {
      //scrollTop就是触发滚轮事件时滚轮的高度
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log("滚动距离" + scrollTop);
      //变量windowHeight是可视区的高度
    
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // console.log("可视高度" + windowHeight);
      //变量scrollHeight是滚动条的总高度
      
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //判断滚动条是否到底部
      if ((scrollTop + windowHeight) >= (scrollHeight-1)) {
        //加载数据
        if (that.checkType == 3) {
          that.getnuclearList();
        }
        if (that.checkType == 4) {
          that.getstoreList();
        }
        if (that.checkType == 1) {
          that.getGoodsList();
        }
        if (that.checkType == 2) {
          that.getRefundList();
        }
      }
    };
  },
  watch: {
     checkType (newName, oldName) {
      console.log(newName)
      if(newName == 3){
        this.checkType = 0
      }
     } 
  },
  methods: {
    //用户列表
    getUserList() {
      var that = this;
      Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/channelData", {
          params: {
            type: that.type,
            date: that.canalType,
            // level: that.type1,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            Indicator.close();
            that.showDom = true;
            that.usernuclearList = res.data.data.list;
            that.detail = res.data.data;
          } else {
            Toast(res.data.msg);
          }
        });
    },
    //初始化
    initialize() {
      $("html,body").animate({ scrollTop: 0 }, 0);
      this.showDom = false;
      this.page = 1;
      this.limit = 15;
      // this.monChange = 1;
      this.isSending = false;
      this.isGetMore = true;
      this.nuclearList = [];
      this.storeList = [];
      this.goodsList = [];
      this.refundList = [];
      this.categoryList = [];
      this.type1 = 1;
      this.type2 = 1;
      this.type3 = 1;
      this.show1 = false;
      this.show2 = false;
      this.show3 = false;
      this.canalType = 1;
    },
    toShow1(index, user_id) {
      this.oneList = [];
      var list = [];
      if (this.checkType == 3) {
        list = this.nuclearList;
      } else {
        list = this.usernuclearList;
      }
      for (var i = 0; i < list.length; i++) {
        if (i == index) {
          list[index].show = !list[index].show;
        } else {
          list[i].show = false;
        }
      }
      if (list[index].show) {
        this.getOneList(user_id, index);
      }
    },
    toShow2(index, user_id) {
      this.twoList = [];
      for (var i = 0; i < this.oneList.length; i++) {
        if (i == index) {
          this.oneList[index].show = !this.oneList[index].show;
        } else {
          this.oneList[i].show = false;
        }
      }
      if (this.oneList[index].show) {
        this.getTwoList(user_id, index);
      }
    },
    //展开2级
    getOneList(user_id, index) {
      var that = this;
      if (that.checkType == 3) {
        var data = {
          user_id: user_id,
          date: 3,
        };
      } else {
        var data = {
          user_id: user_id,
          date: that.canalType,
          limit: 20,
          page: 1,
        };
      }
      // Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/inviteChild", {
          params: data,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            // Indicator.close();
            that.oneList = res.data.data;
            // console.log(that.oneList);
            if (res.data.data.length == 0) {
              Toast("暂无数据");
              // that.nuclearList[index].show = false;
            } else {
              // that.nuclearList[index].show = true;
            }
          } else {
            Toast(res.data.msg);
          }
        });
    },
    //展开3级
    getTwoList(user_id, index) {
      var that = this;
      if (that.checkType == 3) {
        var data = {
          user_id: user_id,
          date: 3,
        };
      } else {
        var data = {
          user_id: user_id,
          date: that.canalType,
          limit: 20,
          page: 1,
        };
      }
      // Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/inviteChild", {
          params: data,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            // Indicator.close();
            that.twoList = res.data.data;
            if (res.data.data.length == 0) {
              Toast("暂无数据");
              // that.nuclearList[index].show = false;
            } else {
              // that.nuclearList[index].show = true;
            }
          } else {
            Toast(res.data.msg);
          }
        });
    },
    //裂变排行榜
    getnuclearList() {
      var that = this;
      if (this.isSending || !this.isGetMore) {
        return;
      }
      this.isSending = true;
      Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/inviteData", {
          params: {
            page: this.page,
            limit: this.limit,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            Indicator.close();
            this.showDom = true;
            that.page++;
            that.nuclearList = that.nuclearList.concat(res.data.data);
            if (res.data.data.length < this.limit) {
              this.isGetMore = false;
            }
            this.isSending = false;
          } else {
            Toast(res.data.msg);
          }
        });
    },
    //艺店排行榜
    getstoreList() {
      var that = this;
      if (this.isSending || !this.isGetMore) {
        return;
      }
      this.isSending = true;
      Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/storeMonthData", {
          params: {
            type: this.storeType,
            month: this.monChange,
            page: this.page,
            limit: this.limit,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.showDom = true;
            Indicator.close();
            that.page++;
            that.storeList = that.storeList.concat(res.data.data);
            if (res.data.data.length < this.limit) {
              this.isGetMore = false;
            }
            this.isSending = false;
          } else {
            Toast(res.data.msg);
          }
        });
    },
    //商品排行榜
    getGoodsList() {
      var that = this;
      if (this.isSending || !this.isGetMore) {
        return;
      }
      this.isSending = true;
      Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/payGoodsDataV2", {
          params: {
            date: this.goodsTime,
            type: this.goodsType,
            // month: this.monChange,
            page: this.page,
            limit: this.limit,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.showDom = true;
            Indicator.close();
            that.page++;
            that.goodsList = that.goodsList.concat(res.data.data);
            if (res.data.data.length < this.limit) {
              this.isGetMore = false;
            }
            this.isSending = false;
          } else {
            Toast(res.data.msg);
          }
        });
    },
    //退款排行榜
    getRefundList() {
      var that = this;
      if (this.isSending || !this.isGetMore) {
        return;
      }
      this.isSending = true;
      Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/refundGoodsData", {
          params: {
            // date: this.canalType,
            type: this.goodsType,
            month: this.monChange,
            page: this.page,
            limit: this.limit,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.showDom = true;
            Indicator.close();
            that.page++;
            that.refundList = that.refundList.concat(res.data.data);
            if (res.data.data.length < this.limit) {
              this.isGetMore = false;
            }
            this.isSending = false;
          } else {
            Toast(res.data.msg);
          }
        });
    },
    //类目列表
    getCategoryList() {
      var that = this;
      // if (this.isSending || !this.isGetMore) {
      //   return;
      // }
      // this.isSending = true;
      Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/typeGoodsData", {
          params: {
            month: this.monChange,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.showDom = true;
            Indicator.close();
            that.categoryList = res.data.data;
          } else {
            Toast(res.data.msg);
          }
        });
    },
    toType(index) {
      // if (index == 2) {
      //   Toast({
      //     message: "正在开发中，敬请期待",
      //     duration: 1000,
      //   });
      //   return;
      // }
      if (this.checkType == index) {
        this.checkType = index;
        return;
      }
      this.checkType = index;
      var length = $("#topS").scrollLeft();
      if (index == 4 && length == 0) {
        $("#topS").animate({ scrollLeft: $("#topS")[0].scrollWidth }, 500);
      }
      if (index == 4 && length > 0) {
        $("#topS").animate({ scrollLeft: 0 }, 500);
      }
      if (this.checkType == 0) {
        this.getStatic(this.typeTime);
      }
      if (this.checkType == 3) {
        this.toOrder();
      
      }
      //if (this.checkType == 4) {
        // this.initialize();
        // this.getnuclearList();
        //this.usernuclearList = [];
       // this.getUserList();
      //}
      if (this.checkType == 4) {
        this.initialize();
        this.getstoreList();
      }
      if (this.checkType == 1) {
        this.initialize();
        this.getGoodsList();
      }
      if (this.checkType == 2) {
        this.initialize();
        this.getRefundList();
      }
      if (this.checkType == 5) {
        this.initialize();
        this.getCategoryList();
      }
    },
    //切换上月和本月
    changeMonth() {
      this.monChange = this.monChange == 1 ? 2 : 1;
      if (this.checkType == 4) {
        this.initialize();
        this.getstoreList();
      }
      // if (this.checkType == 4) {
      //   this.initialize();
      //   this.getGoodsList();
      // }
      if (this.checkType == 2) {
        this.initialize();
        this.getRefundList();
      }
      if (this.checkType == 5) {
        this.initialize();
        this.getCategoryList();
      }
    },
    //商品排行榜时间筛选
    toCanalGoods(index) {
      if (this.goodsTime == index) {
        this.goodsTime = index;
        return;
      }
      this.initialize();
      this.goodsList = [];
      this.goodsTime = index;
      this.getGoodsList();
    },
    //周报时间类型
    toTime(index) {
      if (this.checkTime == index) {
        this.checkTime = index;
        return;
      }
      this.checkTime = index;
      this.typeTime = index + 1;
      this.getStatic(this.typeTime);
    },
    //艺店月排行类型
    toStoreType(index) {
      this.storeType = index;
      this.initialize();
      this.getstoreList();
    },
    //切换用户类型
    changeUser(index) {
      if (this.type == index) {
        this.type = index;
        return;
      }
      this.usernuclearList = [];
      this.type = index;
      this.getUserList();
    },
    //渠道列表时间类型
    toCanal(index) {
      if (this.canalType == index) {
        this.canalType = index;
        return;
      }
      this.usernuclearList = [];
      this.canalType = index;
      this.getUserList();
    },
    //商品排行和退款排行类型
    toGoodsType(index) {
      this.goodsType = index;
      this.initialize();
      // this.initialize();
      // this.getGoodsList();
      if (this.checkType == 1) {
        this.getGoodsList();
      }
      if (this.checkType == 2) {
        this.getRefundList();
      }
    },
    //获取概要数据
    getStatic() {
      let that = this;
      Indicator.open();
      that.$axios
        .get("/mall/v1/statistics/weekData", {
          params: {
            type: this.typeTime,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + localStorage.getItem("token"),
          },
        })
        .then(
          (res) => {
            if (res.data.code == 200) {
              Indicator.close();
              var res = res.data;
              that.showDom = true;
              if (res.data !== "") {
                that.show = true;
              } else {
                that.show = false;
              }
              that.info = res.data;
            } else if (res.data.code == 10000) {
              that.$router.push({ path: "/login" });
              Indicator.close();
            } else {
              Toast(res.data.msg);
            }
          },
          (res) => {
            console.log("error");
          }
        );
    },
    toChart(index) {
      this.$router.push({ name: "chart", query: { index: index } });
    },
    toOrder() {
      this.$router.push({ path: "yard" });
    },
  },
  created() {
    document.title = "业务报表";
    if (localStorage.getItem("token")) {
      this.token = localStorage.getItem("token");
    } else {
      this.$router.push({ path: "/login" });
      return false;
    }
    // if (this.$route.query.time) {
    //   this.time = this.$route.query.time;
    // } else {
    //   this.time = 0;
    // }
    // this.getStatic();
  },
  beforeRouteEnter(to, from, next) {
    // console.log(to.meta.isUseCache);
    // console.log(to);
    if (from.name === "chart") {
      to.meta.isUseCache = true;
    } else {
      to.meta.isUseCache = false;
    }
    document.title = "业务报表";
    next();
  },
  activated() {
    if (!this.$route.meta.isUseCache) {
      this.getStatic(this.typeTime);
      this.$route.meta.isUseCache = false;
    }
  },
};
</script>
<style lang="less">
.mint-spinner-snake {
  border-top-color: rgb(204, 204, 204) !important;
  border-left-color: rgb(204, 204, 204) !important;
  border-bottom-color: rgb(204, 204, 204) !important;
  height: 64px !important;
  width: 64px !important;
  z-index: 1000 !important;
}
.mint-indicator {
  z-index: 1000 !important;
  width: 140px !important;
  height: 140px !important;
}
.mint-indicator-wrapper {
  z-index: 1000 !important;
  width: 140px !important;
  height: 140px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.mint-indicator-mask {
  z-index: 1000 !important;
}
.statis {
  min-height: 100vh;
  width: 100%;
  background: rgba(255, 255, 255, 1);
  .span-chosed {
    color: #2a9dff !important;
  }
  //   padding-bottom: 30px;
  //   box-sizing: border-box;
  .overflow_ {
    text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
    white-space: nowrap; /*让文字不换行*/
    overflow: hidden; /*超出要隐藏*/
  }
  .overflow_2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 2;
  }
  .more-main {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    .more-btn {
      width: 188px;
      height: 80px;
      border-radius: 58px;
      border: 2px solid rgba(244, 244, 244, 1);
      text-align: center;
      line-height: 80px;
      color: #dd0842;
    }
  }
  .content-main {
    position: relative;
    min-height: 100vh;
    ::-webkit-scrollbar {
      display: none;
    }
    .type-scroll {
      width: 100%;
      padding-left: 42px;
      white-space: nowrap;
      overflow-x: auto;
      // overflow-x: visible;
      -webkit-overflow-scrolling: touch;
      height: 100px;
      background: rgba(255, 255, 255, 1);
      border-bottom: solid 2px #f2f2f2;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      z-index: 10;
      .item {
        font-size: 28px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: rgba(155, 155, 155, 1);
        line-height: 40px;
        margin-right: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 28px;
        box-sizing: border-box;
        z-index: 100;
      }
      .item_ {
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 52, 1);
        line-height: 44px;
      }
      .line_ {
        width: 112px;
        height: 10px;
        background: rgba(221, 8, 66, 1) !important;
        border-radius: 5px;
        margin-top: 18px;
      }
      .line {
        width: 112px;
        height: 10px;
        background: #ffffff;
        border-radius: 5px;
        margin-top: 18px;
      }
    }
    .time {
      position: fixed;
      left: 0;
      top: 100px;
      width: 100%;
      height: 100px;
      background: rgba(255, 255, 255, 1);
      padding: 0 26px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 2px #f2f2f2;
      z-index: 10;
      .item {
        width: 154px;
        height: 46px;
        background: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 46px;
        font-size: 28px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: rgba(155, 155, 155, 1);
      }
      .item_ {
        background: rgba(252, 234, 234, 1) !important;
        color: #dd0842;
      }
      .line {
        width: 2px;
        height: 28px;
        background: #f2f2f2;
      }
    }
    .store-type1_ {
      top: 200px !important;
    }
    .store-type1 {
      width: 100%;
      height: 82px;
      background: rgba(255, 255, 255, 1);
      //   border-top: solid 2px #f2f2f2;
      border-bottom: solid 2px #f2f2f2;
      box-sizing: border-box;
      position: fixed;
      top: 100px;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 36px;
      z-index: 10;
      > span {
        font-size: 28px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: rgba(51, 51, 52, 1);
      }
      > div {
        width: 154px;
        height: 52px;
        background: #fceaea;
        border-radius: 26px;
        text-align: center;
        line-height: 52px;
        font-size: 28px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #df184e;
      }
    }
    .store-type2_ {
      top: 200px !important;
    }
    .store-type2 {
      position: fixed;
      left: 0;
      top: 182px;
      width: 100%;
      height: 100px;
      background: rgba(255, 255, 255, 1);
      padding: 0 36px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 2px #f2f2f2;
      z-index: 10;
      .item {
        width: 154px;
        height: 46px;
        background: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 46px;
        font-size: 28px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: rgba(155, 155, 155, 1);
      }
      .item_ {
        background: rgba(252, 234, 234, 1) !important;
        color: #dd0842;
      }
      .line {
        width: 2px;
        height: 28px;
        background: #f2f2f2;
      }
    }
    .store-type3_ {
      .item {
        width: 100px !important;
      }
    }
    .store-type3 {
      position: fixed;
      left: 0;
      top: 100px;
      width: 100%;
      height: 100px;
      background: rgba(255, 255, 255, 1);
      padding: 0 26px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 2px #f2f2f2;
      z-index: 10;
      .item {
        width: 116px;
        height: 46px;
        background: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 46px;
        font-size: 28px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: rgba(155, 155, 155, 1);
      }
      .item_ {
        background: rgba(252, 234, 234, 1) !important;
        color: #dd0842;
      }
      .line {
        width: 2px;
        height: 28px;
        background: #f2f2f2;
      }
    }
    .store-size {
      position: fixed;
      left: 0;
      top: 200px;
      width: 100%;
      height: 108px;
      padding: 30px 78px 0 78px;
      box-sizing: border-box;
      background: white;
      display: flex;
      justify-content: space-between;
      z-index: 10;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        > span {
          font-size: 28px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 500;
          color: #333334;
          line-height: 44px;
        }
        .bac {
          width: 72px;
          height: 10px;
          background: white;
          border-radius: 5px;
          margin-top: 4px;
        }
        .bac-red {
          background: #2a9dff !important;
        }
      }
    }
    .store-num {
      position: fixed;
      left: 0;
      top: 300px;
      width: 100%;
      height: 108px;
      padding: 0 26px;
      box-sizing: border-box;
      background: white;
      display: flex;
      justify-content: space-between;
      z-index: 10;
      // align-items: center;
      .line_ {
        width: 2px;
        height: 28px;
        background: #f2f2f2;
        margin-top: 40px;
      }
      .item {
        width: 23.5%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 18px;
        box-sizing: border-box;
        > span {
          font-size: 26px;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #333334;
        }
      }
    }
    .same {
      position: absolute;
      z-index: 9;
    }
    .content2-margin {
      top: 140px !important;
    }
    .content3-margin {
      top: 282px !important;
    }
    .content4-margin {
      top: 300px !important;
    }
    .content5-margin {
      top: 200px !important;
    }
    .content6-margin {
      top: 412px !important;
    }
    .one-content {
      width: 100%;
      top: 240px;
      left: 0;
      .line:after {
        content: "";
        width: 31.5%;
      }
      .line {
        width: 100%;
        padding: 0 26px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        box-sizing: border-box;
        .bac1 {
          background: rgba(253, 251, 242, 1);
        }
        .bac2 {
          background: rgba(248, 247, 247, 1);
        }
        .item {
          width: 31.5%;
          height: 212px;
          // background: rgba(253, 251, 242, 1);
          padding: 20px 0 20px 15px;
          box-sizing: border-box;
          margin-bottom: 26px;
          > div {
            &:nth-child(1) {
              font-size: 26px;
              font-family: PingFang-SC-Medium, PingFang-SC;
              font-weight: 500;
              color: rgba(155, 155, 155, 1);
              line-height: 40px;
            }
            &:nth-child(2) {
              font-size: 34px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: rgba(51, 51, 52, 1);
              line-height: 42px;
              margin-top: 8px;
            }
            &:nth-child(3) {
              margin-top: 30px;
              .span1_ {
                // background: rgba(211, 186, 141, 1);
                color: #dd0842 !important;
                // padding: 0 12px;
              }
              .span1 {
                font-size: 26px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: rgba(155, 155, 155, 1);
                line-height: 40px;
                border-radius: 20px;
                //   padding: 0 12px;
              }
              .span2 {
                font-size: 26px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: rgba(155, 155, 155, 1);
                line-height: 40px;
                // margin-left: 6px;
              }
            }
          }
        }
      }
    }
    .two-content {
      width: 100%;
      padding: 0 26px;
      box-sizing: border-box;
      .sj-img {
        width: 44px;
        height: 44px;
      }
      .item {
        width: 100%;
        // height: 140px;
        border-radius: 12px;
        border: 2px solid rgba(242, 242, 242, 1);
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        padding: 26px 18px;
        box-sizing: border-box;
        margin-bottom: 24px;
        .top {
          display: flex;
          justify-content: space-between;
          width: 100%;
          .line1 {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .img {
              width: 80px;
              height: 80px;
              border-radius: 50%;
              margin-right: 10px;
            }
            .right {
              .name {
                font-size: 28px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: rgba(155, 155, 155, 1);
                line-height: 40px;
                width: 150px;
                text-align: left;
              }
              .btn {
                font-size: 20px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: rgba(51, 51, 52, 1);
                line-height: 36px;
                width: 100px;
                height: 36px;
                background: rgba(252, 234, 234, 1);
                border-radius: 26px;
                text-align: center;
              }
            }
          }
          .line2-main {
            display: flex;
            align-items: center;
            .line2 {
              font-size: 26px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(51, 51, 52, 1);
              line-height: 40px;
              .span_red {
                color: #dd0842 !important;
              }
              span {
                color: #333334;
                // &:nth-child(1) {
                //   color: #333334;
                // }
                // &:nth-child(2) {
                //   color: #dd0842;
                // }
                // &:nth-child(3) {
                //   color: #333334;
                // }
              }
            }
          }
        }
        .bottom-no {
          margin-bottom: 0 !important;
        }
        .bottom {
          display: flex;
          align-items: center;
          // margin-left: 90px;
          // margin-top: 28px;
          margin: 10px 0 20px 90px;
          > span {
            font-size: 28px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #2a9dff;
            line-height: 40px;
          }
        }
        .next-main {
          background: #f8f8f8;
          width: 100%;
          padding-top: 10px;
          border-radius: 12px;
          position: relative;
          .item_1 {
            display: flex;
            // padding: 0;
            box-sizing: border-box;
            border-radius: 12px;
            flex-direction: column;
            &:last-child {
              .item_1_right {
                border-bottom: 0 !important;
              }
            }
            .img-head {
              width: 70px;
              height: 70px;
              border-radius: 50%;
            }
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            .top_2 {
              display: flex;
              align-items: center;
              justify-content: space-between;
              // flex-direction: column;
              padding: 0 0 14px 50px;
              box-sizing: border-box;
              .item_1_right {
                padding-right: 70px;
                box-sizing: border-box;
                width: 528px;
                border-bottom: 2px solid #f2f2f2;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 14px;
                padding-top: 14px;
                // &:last-child {
                //   border-bottom: 0 !important;
                // }
                .item_1_right_content1 {
                  .name {
                    font-size: 28px;
                    font-family: PingFang-SC-Medium, PingFang-SC;
                    font-weight: 500;
                    color: #9b9b9b;
                    line-height: 40px;
                    width: 250px;
                  }
                  .zk-detail {
                    display: flex;
                    align-items: center;
                    > span {
                      font-size: 24px;
                      font-family: PingFangSC-Medium, PingFang SC;
                      font-weight: 500;
                      color: #2a9dff;
                      line-height: 34px;
                    }
                  }
                }
                .item_1_right_content2 {
                  > div {
                    font-size: 24px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    &:nth-child(2) {
                      margin-top: 8px;
                    }
                    .span1 {
                      color: #9b9b9b;
                    }
                    .span2 {
                      color: #dd0842;
                    }
                    .span3 {
                      color: #333334;
                    }
                  }
                }
              }
            }
            .next-bottom {
              width: 100%;
              background: white;
              position: relative;

              .item_2 {
                width: 536px;
                margin-left: 82px;
                display: flex;
                justify-content: space-between;
                padding: 14px 0;
                box-sizing: border-box;
                border-bottom: solid 2px #f2f2f2;
                &:last-child {
                  border-bottom: 0 !important;
                }
                .content1 {
                  display: flex;
                  align-items: center;
                  > img {
                    width: 70px;
                    height: 70px;
                    border-radius: 35px;
                  }
                  .name {
                    font-size: 24px;
                    font-family: PingFang-SC-Medium, PingFang-SC;
                    font-weight: 500;
                    color: #9b9b9b;
                    line-height: 34px;
                    margin-left: 8px;
                    width: 200px;
                  }
                }
                .content2 {
                  > div {
                    font-size: 24px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    &:nth-child(2) {
                      margin-top: 8px;
                    }
                    .span1 {
                      color: #9b9b9b;
                    }
                    .span2 {
                      color: #dd0842;
                    }
                    .span3 {
                      color: #333334;
                    }
                  }
                }
              }
            }
            > img {
              width: 70px;
              height: 70px;
              border-radius: 50%;
            }
          }
        }
        .go-img {
          width: 44px;
          height: 44px;
        }
      }
    }
    .three-content {
      width: 100%;
      padding-bottom: 50px;
      box-sizing: border-box;
      .backgroud {
        background: #ffffff !important;
      }
      .item {
        display: flex;
        // justify-content: space-between;
        width: 100%;
        // height: 600px;
        background: #f8f7f7;
        padding: 28px 36px;
        box-sizing: border-box;
        position: relative;
        align-items: center;
        .line_ {
          width: 448px;
          height: 2px;
          position: absolute;
          background: #e5e5e5;
          right: 78px;
          bottom: 128px;
        }
        .redCorlor {
          color: #dd0842 !important;
          font-weight: 500;
        }
        .blackCorlor {
          color: #333334 !important;
          font-weight: 500;
        }
        .line1 {
          margin: 0 66px 0 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          .img {
            width: 118px;
            height: 118px;
            border-radius: 50%;
            > img {
              width: 118px;
              height: 118px;
              border-radius: 50%;
            }
          }
          .name {
            font-size: 28px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: rgba(51, 51, 52, 1);
            line-height: 40px;
            margin-top: 8px;
            width: 120px;
            text-align: center;
          }
          .btn {
            width: 122px;
            height: 52px;
            background: rgba(252, 234, 234, 1);
            border-radius: 26px;
            text-align: center;
            line-height: 52px;
            font-size: 26px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: rgba(51, 51, 52, 1);
            margin-top: 12px;
          }
        }
        .line2 {
          width: 206px;
          // height: 100%;

          // padding: 60px 0 70px 0;
          box-sizing: border-box;
          margin-right: 10px;
          &:last-child {
            margin-right: 0 !important;
          }
          .item_2 {
            margin-bottom: 30px;
            .margin_1 {
              margin-top: 12px;
            }
            .margin_2 {
              margin-top: 12px;
            }
            &:last-child {
              margin-bottom: 0 !important;
            }
            > div {
              &:nth-child(1) {
                font-size: 26px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: #9b9b9b;
                line-height: 40px;
              }
              &:nth-child(2) {
                font-size: 32px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: rgba(51, 51, 52, 1);
                line-height: 42px;
              }
            }
          }
        }
      }
    }
    .four-content {
      width: 100%;
      //   padding-bottom: 50px;
      //   box-sizing: border-box;
      .item {
        width: 100%;
        // height: 260px;
        padding: 44px 26px;
        box-sizing: border-box;
        border-bottom: solid 2px #f2f2f2;
        display: flex;
        justify-content: space-between;
        .left {
          width: 30%;
          > img {
            width: 100%;
            // height: 24.6%;
            border-radius: 16px;
          }
        }
        .right {
          width: 68%;
          .div1 {
            // width: 122px;
            // height: 52px;
            // background: rgba(252, 234, 234, 1);
            // border-radius: 26px;
            // text-align: center;
            // line-height: 52px;
            font-size: 26px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: rgba(51, 51, 52, 1);
          }
          .div2 {
            font-size: 28px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: rgba(51, 51, 52, 1);
            line-height: 40px;
            margin-top: 6px;
            width: 100%;
          }
          .div3 {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            > span {
              &:nth-child(2) {
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 52, 1);
                line-height: 40px;
              }
              &:nth-child(1) {
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(221, 8, 66, 1);
                line-height: 40px;
              }
            }
          }
        }
      }
    }
    .five-content {
      width: 100%;
      .title {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        border-bottom: solid 2px #f2f2f2;
        box-sizing: border-box;
        .title-text {
          width: 174px;
          height: 46px;
          text-align: center;
          line-height: 46px;
          font-size: 28px;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: rgba(51, 51, 52, 1);
        }
        .line {
          width: 2px;
          height: 28px;
          background: #f2f2f2;
        }
      }
      .item {
        width: 100%;
        height: 160px;
        border-bottom: solid 2px #f2f2f2;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .line {
          width: 2px;
          height: 28px;
          background: #f2f2f2;
        }
        .content_ {
          border-right: solid 2px #f2f2f2;
          display: flex;
          justify-content: center;
          height: 160px;
          width: 174px;
          align-items: center;
          font-size: 28px;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #9b9b9b;
          padding: 20px 0;
          box-sizing: border-box;
          > img {
            width: 44px;
            height: 44px;
            margin-right: 10px;
          }
        }
        .content {
          height: 160px;
          width: 174px;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 28px;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #9b9b9b;
          padding: 20px 0;
          box-sizing: border-box;
          > span {
            line-height: 40px;
            &:nth-child(2) {
              margin-top: 40px;
            }
          }
        }
      }
    }
    .canal-centent {
      width: 100%;

      background: white;
      min-height: calc(100vh - 200px);
      padding: 0 26px 50px 26px;
      box-sizing: border-box;
      .sj-img {
        width: 44px;
        height: 44px;
      }
      .item {
        width: 100%;
        // height: 140px;
        border-radius: 12px;
        border: 2px solid rgba(242, 242, 242, 1);
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        padding: 26px 20px;
        box-sizing: border-box;
        margin-bottom: 24px;
        .top {
          display: flex;
          justify-content: space-between;
          width: 100%;
          .line1 {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .img {
              width: 80px;
              height: 80px;
              border-radius: 50%;
              margin-right: 10px;
            }
            .right {
              .name {
                font-size: 28px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: rgba(155, 155, 155, 1);
                line-height: 40px;
                width: 250px;
                text-align: left;
              }
              .btn {
                font-size: 20px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: rgba(51, 51, 52, 1);
                line-height: 36px;
                width: 100px;
                height: 36px;
                background: rgba(252, 234, 234, 1);
                border-radius: 26px;
                text-align: center;
              }
            }
          }
          .line2-main {
            display: flex;
            align-items: center;
            .line2 {
              font-size: 28px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(51, 51, 52, 1);
              line-height: 40px;
              .span_red {
                color: #dd0842 !important;
              }
              span {
                color: #333334;
                // &:nth-child(1) {
                //   color: #333334;
                // }
                // &:nth-child(2) {
                //   color: #dd0842;
                // }
                // &:nth-child(3) {
                //   color: #333334;
                // }
              }
            }
          }
        }
        .bottom-no {
          margin-bottom: 0 !important;
        }
        .bottom {
          display: flex;
          align-items: center;
          // margin-left: 90px;
          // margin-top: 28px;
          margin: 10px 0 20px 90px;
          > span {
            font-size: 28px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #2a9dff;
            line-height: 40px;
          }
        }
        .next-main {
          background: #f8f8f8;
          width: 100%;
          padding-top: 10px;

          border-radius: 12px;
          .item_1 {
            display: flex;
            // padding: 0;
            box-sizing: border-box;
            border-radius: 12px;
            flex-direction: column;
            &:last-child {
              .item_1_right {
                border-bottom: 0 !important;
              }
            }
            .img-head {
              width: 70px;
              height: 70px;
              border-radius: 50%;
            }
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            .top_2 {
              display: flex;
              align-items: center;
              justify-content: space-between;
              // flex-direction: column;
              padding: 0 0 14px 50px;
              box-sizing: border-box;
              .item_1_right {
                padding-right: 70px;
                box-sizing: border-box;
                width: 528px;
                border-bottom: 2px solid #f2f2f2;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 34px;
                padding-top: 34px;
                // &:last-child {
                //   border-bottom: 0 !important;
                // }
                .item_1_right_content1 {
                  .name {
                    font-size: 28px;
                    font-family: PingFang-SC-Medium, PingFang-SC;
                    font-weight: 500;
                    color: #9b9b9b;
                    line-height: 40px;
                    width: 250px;
                  }
                  .zk-detail {
                    display: flex;
                    align-items: center;
                    > span {
                      font-size: 24px;
                      font-family: PingFangSC-Medium, PingFang SC;
                      font-weight: 500;
                      color: #2a9dff;
                      line-height: 34px;
                    }
                  }
                }
                .item_1_right_content2 {
                  > div {
                    font-size: 24px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    &:nth-child(2) {
                      margin-top: 8px;
                    }
                    .span1 {
                      color: #9b9b9b;
                    }
                    .span2 {
                      color: #dd0842;
                    }
                    .span3 {
                      color: #333334;
                    }
                  }
                }
              }
            }
            .next-bottom {
              width: 100%;
              background: white;

              .item_2 {
                width: 536px;
                margin-left: 82px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 14px 0;
                box-sizing: border-box;
                border-bottom: solid 2px #f2f2f2;
                &:last-child {
                  border-bottom: 0 !important;
                }
                .content1 {
                  display: flex;
                  align-items: center;
                  > img {
                    width: 70px;
                    height: 70px;
                    border-radius: 35px;
                  }
                  .name {
                    font-size: 24px;
                    font-family: PingFang-SC-Medium, PingFang-SC;
                    font-weight: 500;
                    color: #9b9b9b;
                    line-height: 34px;
                    margin-left: 8px;
                    width: 200px;
                  }
                }
                .content2 {
                  > div {
                    font-size: 24px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    &:nth-child(2) {
                      margin-top: 8px;
                    }
                    .span1 {
                      color: #9b9b9b;
                    }
                    .span2 {
                      color: #dd0842;
                    }
                    .span3 {
                      color: #333334;
                    }
                  }
                }
              }
            }
            > img {
              width: 70px;
              height: 70px;
              border-radius: 50%;
            }
          }
        }
        .go-img {
          width: 44px;
          height: 44px;
        }
      }
      // .canal-item {
      //   background: white;
      //   margin-bottom: 22px;
      //   .title {
      //     width: 100%;
      //     height: 120px;
      //     border-bottom: solid 2px #f2f2f2;
      //     box-sizing: border-box;
      //     display: flex;

      //     .title-left {
      //       width: 156px;
      //       height: 100%;
      //       border-right: solid 2px #f2f2f2;
      //       box-sizing: border-box;
      //       display: flex;
      //       justify-content: center;
      //       align-items: center;
      //       font-weight: 500;
      //       color: #2a9dff;
      //       font-size: 28px;
      //     }
      //     .title-right {
      //       height: 100%;
      //       display: flex;
      //       justify-content: space-between;
      //       align-items: center;
      //       .type-item {
      //         width: 146px;
      //         height: 100%;
      //         display: flex;
      //         align-items: center;
      //         // justify-content: center;
      //         flex-direction: column;
      //         padding-top: 12px;
      //         box-sizing: border-box;
      //         .span1 {
      //           font-size: 26px;
      //           font-family: PingFangSC-Semibold, PingFang SC;
      //           font-weight: 600;
      //           color: #333334;
      //           line-height: 36px;
      //         }
      //         .span2 {
      //           font-size: 24px;
      //           font-family: PingFangSC-Semibold, PingFang SC;
      //           font-weight: 600;
      //           color: #333334;
      //           line-height: 34px;
      //         }
      //       }
      //       .line_ {
      //         width: 2px;
      //         height: 28px;
      //         background: #f2f2f2;
      //       }
      //     }
      //   }
      //   .list-content {
      //     width: 100%;
      //     display: flex;
      //     .item-left {
      //       width: 156px;
      //       height: auto;
      //       border-right: solid 2px #f2f2f2;
      //       box-sizing: border-box;
      //       display: flex;
      //       justify-content: center;
      //       padding-top: 34px;
      //       font-size: 28px;
      //       font-family: PingFangSC-Medium, PingFang SC;
      //       font-weight: 500;
      //       color: #2a9dff;
      //       line-height: 40px;
      //     }
      //     .item-right {
      //       width: calc(100% - 156px);
      //       text-align: center;
      //       line-height: 100px;
      //       .item {
      //         // width: 146px;
      //         height: 100px;
      //         border-bottom: solid 2px #f2f2f2;
      //         box-sizing: border-box;
      //         display: flex;
      //         justify-content: space-between;
      //         &:last-child {
      //           border-bottom: 0 !important;
      //         }
      //         .line {
      //           width: 146px;
      //           height: 100%;
      //           display: flex;
      //           justify-content: center;
      //           align-items: center;
      //         }
      //         .line1 {
      //           width: 146px;
      //           height: 100%;
      //           line-height: 100px;
      //           font-size: 24px;
      //           font-family: PingFangSC-Medium, PingFang SC;
      //           font-weight: 500;
      //           color: #9b9b9b;
      //           text-align: center;
      //           padding-left: 10px;
      //           box-sizing: border-box;
      //         }
      //         .line2 {
      //           width: 146px;
      //           height: 100%;
      //           font-size: 26px;
      //           font-family: PingFang-SC-Medium, PingFang-SC;
      //           font-weight: 500;
      //           color: #333334;
      //           text-align: center;
      //         }
      //       }
      //     }
      //   }
      // }
    }
  }
  .statis_no_list {
    background: #ffffff !important;
    .no_pic {
      width: 456px;
      height: 420px;
      margin-top: 300px;
    }
  }
  .statis_no {
    text-align: center;
    background: #f8f8f8;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  .no_pic {
    width: 456px;
    height: 420px;
    margin-top: 400px;
  }
  .no_title {
    color: #9b9b9b;
    font-size: 28px;
    text-align: center;
    margin-top: 20px;
  }
}
</style>